<template>
  <div class="header">
    <div class="header-left">
      <div class="iconfont back-icon">&#xe6db;</div>
    </div>
    <div class="header-input"><span class="iconfont">&#xe6e1;</span>输入城市/景点/游玩主题</div>
    <router-link to="/city">
      <div class="header-right city-icon">{{this.$store.state.city}}<span class="iconfont">&#xe64a;</span></div>
    </router-link>
    
  </div>
</template>

<script>
  export default {
    name:'HomeHeader',
    props:{
      //city:String
    }
  }
</script>

<style scoped lang="stylus">
  .header
    display :flex
    line-height :.86rem
    background :#00bcd4
    color :#fff
    .header-left
      width :.64rem
      float :left
      .back-icon
        text-align :center
        font-size:.4rem
    .header-input
      padding-left :.2rem
      flex:1
      height :.64rem
      line-height :.64rem
      margin-top :.12rem
      margin-left :.2rem
      background :#fff
      border-radius :.1rem
      color :#ccc
    .header-right
      min-width :1.24rem
      padding 0 .1rem
      float :right
      text-align :center
      color #fff
      .city-icon
        font-size:.16rem
</style>